<template>
    <el-switch 
    class="switchStyle" 
    v-model="wval" 
    style="--el-switch-on-color: #13ce66;" 
    active-text="启用" inactive-text="禁用" 
    :active-value="activeValue"
    :inactive-value="inactiveValue"
    @change="onChange"/>
</template>
<script setup>
import {ref,onMounted,watch} from "vue"

const props = defineProps({
    modelValue:'',
    ajaxMethod:Function,
    activeValue:'', // switch 状态为 on 时的值 默认为ture
    inactiveValue:'', // switch的状态为 off 时的值 默认为false
    params:{
        type:Object,
        default:{}
    },
    opposite:{ // 是否取modelValue的相反值
        type:Boolean,
        default:false  // 不去相反值
    },
})

const emit = defineEmits(['update:modelValue','change'])

const wval = ref(false)

watch(()=>props.modelValue,(n,o)=>{
    wval.value = props.opposite? !n : n
})

onMounted(()=>{
    wval.value = props.opposite? !props.modelValue : props.modelValue
})

const onChange = ()=>{
    emit('update:modelValue',wval.value)
    emit('change',wval.value)
    props.ajaxMethod && props.ajaxMethod(props.params)
    
}


</script>
<style>
.switchStyle .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
  }
  .switchStyle .el-switch__label--left {
    z-index: 9;
    left: 6px;
  }
  .switchStyle .el-switch__label--right {
    z-index: 9;
    left: -14px;
  }
  .switchStyle .el-switch__label.is-active {
    display: block;
    
    
  }
  .switchStyle .el-switch__label.is-active span{
    font-size: 12px!important;
  }
  .switchStyle.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 60px !important;
  }
</style>